<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>芝麻奥赛编程-估分系统</title>
</head>

<body style="background-color: gainsboro;">
    <div class="border3">
        <br>
        <img src="https://wechatapppro-1252524126.file.myqcloud.com/appAO5xBfTl4046/image/b_u_5fe29c849e5b6_Q6HjvniL/kyfi5xe30ytr.png" alt="" style="width:100%;">
        <br>
        <br>
        <hr>
        <div class="inner_div">

            <div class="horizon_div1">准考证号:</div>

            <div class="horizon_div2">{{.user_id}}</div>

        </div>
        <hr> {{range $index,$data := .data}}
        <br>
        <div class="inner_div">

            <div class="horizon_div1">{{.Title}}:</div>

            <div class="horizon_div2">{{.Score}}</div>

        </div>
        {{end}}
        <br>
        <div class="inner_div">

            <div class="horizon_div1">实时排名: </div>

            <div class="horizon_div2"><label style="color: red;font-weight: bold;">{{.ranking}}</label>/{{.overall_total}}</div>

        </div>

        <br>
        <form action="/"> <button type="submit" class="btn btn-primary">返回</button>
        </form>
        <br>
        <hr>
        <img src="https://wechatapppro-1252524126.file.myqcloud.com/appAO5xBfTl4046/image/b_u_5fe29c849e5b6_Q6HjvniL/kyflj5mn05hg.png" width="300px">
        <br>

    </div>

    <br>
</body>

</html>


<style>
    .ranking_border {
        margin: 0 auto;
        width: fit-content;
        border-radius: 5px;
        text-align: center;
        height: 40px;
        background-color: blue;
        /* outline: 2px solid red; */
    }
    
    .horizon_div1 {
        width: fit-content;
        height: 20px;
        padding-left: 20%;
    }
    
    .horizon_div2 {
        width: fit-content;
        padding-right: 30%;
        height: 20px;
    }
    
    .center_div {
        margin: 200px auto;
        text-align: center;
        background-color: azure;
        width: 700px;
        padding: 10px;
    }
    
    .border3 {
        width: 90%;
        max-width: 550px;
        background: whitesmoke;
        border-radius: 10px;
        margin: 20px auto;
        text-align: center;
        /* 重点样式 */
        box-shadow: 0 0 0 10px greenyellow;
        outline: 10px solid green;
        padding: 10px;
    }
    
    .inner_div {
        margin: 0 auto;
        /* text-align: left; */
        padding-left: 50px;
        display: flex;
        justify-content: space-between;
    }
</style>